<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa.js spin-off project uupaa-suketrans.js - test</title>

<style type="text/css">
.bg1 {
  background: skyblue url(http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/grad1.png) no-repeat center center
}
</style>
<script type="text/javascript" src="./uupaa-suketrans.js"></script>
</head>
<body>
<p>
  <a href="http://uupaa-js-spinoff.googlecode.com/">uupaa.js - spinoff - uupaa-suketranse.js</a> is Alpha png images transparent for IE6
  <br />- <a href="http://uupaa-js.googlecode.com/">uupaa.js</a> spin-off project
</p>
<hr />
<h2>Static alpha png images:</h2>
  <div class="alpha bg1">
        <img src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/o32.png" alt="Alpha png" />
        <img src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/f32.png" alt="Alpha png" />
        <img src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/i32.png" alt="Alpha png" />
        <img src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/s32.png" alt="Alpha png" />
        <img src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/grad1.png" alt="Alpha png" />
  </div>
<hr />
<h2>Dynamic redraw:</h2>
  <div style="border: 1px dotted blue; padding: 1em; background-color: #eee; width: 160px; height: 160px; float: left">
    <p>&lt;img src="..."&gt; :
    <br /><img id="img1" class="alpha" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/i32.png" alt="" />
    </p>
  </div>
  <div style="border: 1px dotted blue; padding: 1em; background-image: url(http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/grid1.gif); height: 160px">
    <p>&lt;input type="image" src="..."&gt; : (clickable)
    <br /><input id="btn1" type="image" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/i32.png" onclick="alert('clicked')" title="(click me!)" />
    </p>
  </div>
<hr />
<h2>Fixed Bugs:</h2>
<div>
  <div id="div1" class="alpha" style="background-image: url('http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/i32.png')">
    <a href="http://uupaa-js.googlecode.com/">uupaa.js</a>
    <input type="button" value="click" onclick="alert('click')" />
    <div>
      <textarea cols="10" rows="2">textarea</textarea>
      <div>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
function boot() {
  var i = 0;
  var file = "", past = "", path = "http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-suketrans.js/";

  window.setInterval(function() {
    past = file;
    function id(elm) { return document.getElementById(elm); }
    switch (++i % 7) {
    case 1:  file = "grid1.gif"; break;
    case 2:  file = "o32.png"; break;
    case 3:  file = "f32.png"; break;
    case 4:  file = "i32.png"; break;
    case 5:  file = "s32.png"; break;
    case 6:  file = "grad1.png"; break;
    default: file = "l16.gif"; break;
    }
    id("img1").src = path + file;
    id("btn1").src = path + file;
    id("div1").style.backgroundImage = "url(" + path + past + ")";
  }, 1000);
}
window.onload = boot;

</script>
</body>
</html>
